﻿@page "/news/release-notes/160"

<Seo Canonical="news/release-notes/160" Title="Blazorise v1.6" Description="This blog post contains the changelog of the most recent bug fixes, improvements and new features included in the Blazorise v1.6 release." ImageUrl="img/news/empty.png" />

<NewsPageImage Source="img/news/empty.png" Text="Blazorise v1.6" />

<NewsPageTitle>
    Announcing Blazorise 1.6 -
</NewsPageTitle>

<Paragraph>
    We're pleased to announce the release of Blazorise version 1.6.
</Paragraph>

<NewsPageSubtitle>
    Key Blazorise 1.6 Highlights 💡
</NewsPageSubtitle>

<Paragraph>
    Here's a summary of what's new in this release:
</Paragraph>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Strong>DataGrid:</Strong> Dynamic Data Binding
        </Paragraph>
    </UnorderedListItem>
    <UnorderedListItem>
        <Paragraph>
            <Strong></Strong>:
        </Paragraph>
    </UnorderedListItem>
</UnorderedList>

<NewsPageSubtitle>
    Upgrading from 1.5.x to 1.6 👨‍🔧
</NewsPageSubtitle>

<Paragraph>
    Upgrade your Blazorise application seamlessly with the following steps:
</Paragraph>

<OrderedList>
    <OrderedListItem>
        <Paragraph>
            Update all <Strong>Blazorise.*</Strong> package references to <Strong>1.6</Strong>.
        </Paragraph>
    </OrderedListItem>
    <OrderedListItem>
        <Paragraph>
            Enjoy the latest features without any breaking changes to the API.
        </Paragraph>
    </OrderedListItem>
</OrderedList>

<NewsPageSubtitle>
    New Features & Enhancements 🚀
</NewsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Charts
</Heading>

<Heading Size="HeadingSize.Is4">
    Zoom plugin
</Heading>

<Paragraph>
    The zoom plugin was added to the <Code>Chart</Code> component. This feature allows users to zoom in and out on specific areas of the chart, it also the ability to pan around the chart, making it easy to explore the data in more detail.
    Visit our docs for more information, <Anchor To="docs/extensions/chart-zoom">Chart Zoom Plugin</Anchor>
</Paragraph>


<Heading Size="HeadingSize.Is3">
    DataGrid
</Heading>

<Heading Size="HeadingSize.Is4">
    AutoGenerateColumns
</Heading>

<Paragraph>
    In the <Code>DataGrid</Code> <Code>AutoGenerateColumns</Code> feature, we've added new attributes to the attribute based API to be able to further configure the way that the columns are rendered.
</Paragraph>

<UnorderedList>
    <UnorderedListItem>
        <Code>[DisplayAttribute]</Code> - Represents an attribute that can be applied to properties or fields to specify the caption.
    </UnorderedListItem>
    <UnorderedListItem>
        <Code>[OrderAttribute]</Code> - Represents an attribute that can be applied to properties or fields to specify the order in which they should be displayed or edited.
    </UnorderedListItem>
    <UnorderedListItem>
        <Code>[IgnoreFieldAttribute]</Code> - Represents an attribute that can be applied to properties or fields to specify they should not be automatically generated.
    </UnorderedListItem>
    <UnorderedListItem>
        <Code>[SelectAttribute]</Code> - Represents an attribute that can be applied to properties or fields to specify additional metadata for a select component.
    </UnorderedListItem>
    <UnorderedListItem>
        <Code>[NumericAttribute]</Code> - Represents an attribute that can be applied to numeric properties or fields to specify additional metadata.
    </UnorderedListItem>
    <UnorderedListItem>
        <Code>[DateAttribute]</Code> - Represents an attribute that can be applied to date properties or fields to specify additional metadata.
    </UnorderedListItem>
</UnorderedList>

<Heading Size="HeadingSize.Is4">
    Generate ODataQuery support
</Heading>

<Paragraph>
    Added a new extension method <Code>ToODataString</Code> to the ReadData, <Code>DataGridReadDataEventArgs</Code> that can be used to generate an OData query string.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Contextual Filtering
</Heading>

<Paragraph>
    The filtering components have further been improved to render contextual numeric, select, check, date and text edit components according to the DataGrid column types you have provided.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Dynamic Data Binding
</Heading>

<Paragraph>
    We are excited to announce a new feature in the Blazorise DataGrid component – dynamic data binding. This enhancement provides greater flexibility and ease of use when working with dynamic data sources.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Manual loading state
</Heading>

<Paragraph>
    Added a new <Code>SetLoading</Code> so you're able to control the loading state of the DataGrid.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    New MaskPlaceholder on InputMask
</Heading>

<Paragraph>
    Introduced a new <Code>MaskPlaceholder</Code> property on the <Code>InputMask</Code> component to provide additional information to the user about the valid input format. While the change is not groundbreaking, it is a small but important step towards improving the user experience.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Disable days of week in DatePicker
</Heading>

<Paragraph>
    We have added a new parameter to the <Code>DatePicker</Code> component, named <Code>DisabledDays</Code>. It is now possible to disable any days of a week to be picked by the user.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Automatic <Code>rel</Code> Attribute for Blazorise Link Component
</Heading>

<Paragraph>
    Links with <Code>Target="Target.Blank"</Code> now automatically include <Code>rel="noopener noreferrer"</Code> for enhanced security and privacy. This update prevents new pages from accessing the original page, reducing phishing risks, and ensures referrer information is not sent to the target site, thereby enhancing the security and privacy of external links by default.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    Updated NumericPicker library
</Heading>

<Paragraph>
    As an ongoing process to improve security of Blazorise dependencies, we have updated autoNumeric.js library to use the latest version.
</Paragraph>

<Heading Size="HeadingSize.Is4">
    CellNavigable
</Heading>

<Paragraph>
    Introduce the <Code>CellNavigable</Code> parameter. By enabling this feature you will be able to navigate the DataGrid cells by using the arrows keys, tabbing and clicking.
    This feature is specially useful in conjuction with the <Code>DataGridEditMode.Cell</Code> to make the rapid editing experience more seamless.
    Find out an updated example for Rapid Editing in the <Anchor To="docs/extensions/datagrid/features/editing" Title="Link to DataGrid Editing">DataGrid Editing</Anchor> page.
</Paragraph>

<Paragraph>
    We've also introduced a new <Code>DataGridEditModeOptions</Code> that allows you to futher customize how your DataGrid will act regarding edit operations. Currently we've introduced two new CellEdit options to be able to enable or disable editing or single or double click.
</Paragraph>

<Heading>
    Better form support in SSR mode
</Heading>

<Paragraph>
    In this release we have made some changes to enable beter support our input components like TextEdit, NumericEdit, etc. to work with server-side rendering. It works by automatically calculating the <Code>name</Code> attribute of form field which then helps it to properly POST the form.
</Paragraph>

<Heading>
    Wrap Up
</Heading>

<Heading>
    Added more customization options to the ListView component
</Heading>

<Paragraph>
    Added The following customization options to the ListView component: ItemTextColor, ItemBackground, ItemPadding, ItemMargin, ItemClass, ItemStyles. These properties are callbacks that take the individual item, and return the respected values.
</Paragraph>

<NewsPagePostInfo UserName="Mladen Macanović" ImageName="mladen" PostedOn="July 15th, 2024" Read="9 min" />